<template>
  <div class="index">
    <el-row class="index-row">
      <el-col :span="24">
        <div class="index-header">
          <topHeader></topHeader>
        </div>
      </el-col>
      <div class="index-main">
        <el-col :span="4" class="wfull">
          <div class="index-aside">
            <mianAside></mianAside>
          </div>
        </el-col>
        <el-col class="wfull" :span="20">
          <div class="index-content">
            <router-view></router-view>
          </div>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import topHeader from "@/components/Header";
import mianAside from "@/components/Aside";
export default {
  components: {
    topHeader,
    mianAside,
  },
};
</script>
<style lang="less" scoped>
.index {
  height: 100%;
  width: 1360px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  .index-row {
    height: 100%;
    width: 100%;
    .index-main {
      height: calc(100% - 76px);
      .index-aside {
        height: 100%;
      }
      .index-content {
        background-color: rgb(249, 249, 249);
        // height: 100%;
        height: calc(100vh - 76px);

        overflow: scroll;
        &::-webkit-scrollbar {
          width: 0 !important;
        }
      }
    }
  }
}
.wfull {
  height: 100%;
}
</style>